<template>
    <div class="app-container">
      <div class="block">
        <el-row :gutter="24">
          <el-col :span="4">
            <el-date-picker type="date" size="mini" placeholder="起始日期" v-model="listQuery.beginTime" value-format="yyyy-MM-dd"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date" size="mini" placeholder="结束日期" v-model="listQuery.endTime" value-format="yyyy-MM-dd"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-input v-model="listQuery.criteria.logName" size="mini" placeholder="日志名称"></el-input>
          </el-col>
          <el-col :span="4">
            <el-select v-model="listQuery.criteria.logType" placeholder="请选择日志类型" size="mini" style="width: 100%;">
                <el-option label="业务日志" value="业务日志" ></el-option>
                <el-option label="异常日志" value="异常日志" ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-button type="success" size="mini" icon="el-icon-search" @click.native="search">搜索</el-button>
            <el-button type="primary" size="mini" icon="el-icon-refresh" @click.native="reset">重置</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click.native="clear" >清空</el-button>
          </el-col>
        </el-row>
        <br>
      </div>
  
      <el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="flash-table-expand" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="日志类型">
                    <span>{{ props.row.logType }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="日志名称">
                    <span>{{ props.row.logName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="用户">
                    <span>{{ props.row.userName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="类名">
                    <span>{{ props.row.className }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="方法名">
                    <span>{{ props.row.method }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="时间">
                    <span>{{ formatDate(props.row.createTime) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="内容">
                    <span>{{ props.row.message }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
  
        <el-table-column
          label="用户"
          prop="userName">
        </el-table-column>
        <el-table-column
          label="日志类型"
          prop="logType">
        </el-table-column>
        <el-table-column
          label="日志名称"
          prop="logName">
        </el-table-column>
        <el-table-column
          label="时间"
          prop="createTime">
          <template slot-scope="scope">
             {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="结果"
          prop="succeed">
        </el-table-column>
        
      </el-table>
  
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100,500]"
        :page-size="listQuery.size"
        :total="total"
        :current-page.sync="listQuery.current"
        @size-change="changeSize"
        @current-change="fetchPage"
        @prev-click="fetchPrev"
        @next-click="fetchNext">
      </el-pagination>
  
    </div>
  </template>
  
  <script src="./log.js"></script>
  <style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/common.scss";
  </style>
  